<template>
  <div
    v-for="item in data"
    :key="item.id"
    class="message_item"
    :class="{ active: chatStore.currendSessionId == item.id }"
    @click="sessionClick(item)"
  >
    <div class="avatar">
      <el-avatar :src="item.avatar" :shape="'square'" :size="40"></el-avatar>
      <div class="dage" v-if="item.noreadnum > 0">{{ item.noreadnum}}</div>
    </div>
    <div class="info">
      <div class="info_top">
        <div class="name">{{ item.name }}</div>
        <div class="shallow time">{{ computeTime(item.update_time)  }}</div>
      </div>
      <div class="info_buttom">
        <div class="shallow message">{{ item.data }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useChat from '@renderer/pinai/modules/chat'
import { formatTimeAgo } from '@renderer/utlis/time';

const emit = defineEmits(['sessionClick'])

const chatStore = useChat()

interface Item {
  avatar: string
  chat_type: string
  data: string
  id: number
  invite_confirm: number
  isTopping: boolean
  istop: boolean
  name: string
  noreadnum: number
  nowarn: boolean
  remark: string
  shownickname: boolean
  strongwarn: boolean
  type: string
  update_time: number
  user_id: number
}

defineProps<{
  data: Item[]
}>()

// 点击会话
const sessionClick = (item: Item) => {
  emit('sessionClick', item)
}

// 计算消息的时间
const computeTime = (time: number) => {
  return formatTimeAgo(time)
}

</script>

<style lang="scss" scoped>
.message_item {
  display: flex;
  padding: 10px 20px;

  .avatar {
    position: relative;

    .dage {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: red;
      color: #fff;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 10px;

    .info_top {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .name {
        width: 80px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .time {
        width: 50px;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .info_buttom {
      margin-top: 3px;

      .message {
        width: 140px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }

  &:hover {
    background-color: #c8c7c6;
  }
}
.active {
  background-color: #c8c7c6;
}
</style>
